<script setup>
import { onMounted, ref } from "vue";
import useRoute from "../../hooks/route";
import { onLoad } from "@dcloudio/uni-app";
import { gradeDetailApi } from "@/services/income";
import cloneDeep from "lodash/cloneDeep";
import useFormat from "@/hooks/format";

const { formatCommas } = useFormat();

// route query
const routeQuery = ref();
const { getRouteQuery } = useRoute();

// init data loading
const initDataLoading = ref(true);
// api得到的数据 展示
const showDetail = ref(undefined);

// init
const initData = async () => {
  try {
    initDataLoading.value = true;
    const paramsData = cloneDeep({
      id: routeQuery.value?.id,
    });
    const results = await Promise.all([gradeDetailApi(paramsData)]);
    showDetail.value = results[0].data;
    initDataLoading.value = false;
  } catch (error) {
    initDataLoading.value = false;
  }
};

onMounted(() => {
  initData();
});

// on load
onLoad((query) => {
  // 获取路由参数
  routeQuery.value = getRouteQuery(query);
});
</script>

<template>
  <view class="container">
    <!-- scroll view -->
    <scroll-view class="scroll-view" scrollY>
      <view class="content">
        <view v-if="!initDataLoading && showDetail">
          <uni-title type="h3" title="收入详情"></uni-title>
          <view class="info-warp">
            <view class="info-item">
              <text class="info-label">客户</text>
              <text class="info-value">
                {{ showDetail.order_name || "-" }}
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">手机号</text>
              <text class="info-value">
                {{ showDetail.order_phone || "-" }}
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">交易成功时间</text>
              <text class="info-value">
                {{ showDetail.created_at || "-" }}
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">订单金额</text>
              <text class="info-value">
                {{
                  (showDetail.order_price &&
                    formatCommas(showDetail.order_price)) ||
                  "-"
                }}元
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">订单编号</text>
              <view class="info-value">
                <up-copy
                  :content="
                    showDetail.third_order ? showDetail.third_order : '-'
                  "
                >
                  {{ showDetail.third_order || "-" }}
                  <text class="copy-btn">复制</text>
                </up-copy>
              </view>
            </view>
            <view class="info-item">
              <text class="info-label">奖励金额</text>
              <text class="info-value">
                {{
                  (showDetail.into_price &&
                    formatCommas(showDetail.into_price)) ||
                  "-"
                }}元
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">出账状态</text>
              <text class="info-value">
                {{ showDetail.into_status_text || "-" }}
              </text>
            </view>

            <view class="info-item" v-if="showDetail.delivery_name">
              <text class="info-label">发货状态</text>
              <text class="info-value">
                {{ showDetail.order_status || "-" }}
              </text>
            </view>
            <view class="info-item" v-if="showDetail.delivery_name">
              <text class="info-label">物流号</text>
              <text class="info-value">
                {{
                  showDetail.delivery_name
                    ? showDetail.delivery_name + "-" + showDetail.delivery_id
                    : "-"
                }}
              </text>
            </view>
          </view>
        </view>
        <view v-else>
          <up-skeleton rows="7" loading animate></up-skeleton>
        </view>
      </view>
    </scroll-view>
    <br />
  </view>
</template>

<style lang="scss" scoped>
@import "./Index.scss";
</style>
